$(document).ready(() => {
    const serverHost = window.config.serverHost;

    // get slide adv pics
    $.ajax({
        url: `${serverHost}/merchant/advertisement`,
        type: 'GET',
        success: data => {
            console.log(data)
            let content = ''
            data.forEach((item, index) => {
                if (index == 0) {
                    content += `<div class="item active" style="text-align:center; width:550px;height:220px">
                                    <img style="width:100%; height:100%" alt="" src="${item.foodPic}" />
                                </div>`}
                else {
                    content += `<div class="item " style="text-align:center; width:550px;height:220px">
								<img style="width:100%; height:100%" alt="" src="${item.foodPic}" />
                            </div>`
                }
            })
            $('#slide').html(content)
        },
        error: () => {
            console.log("SHOPCAR INIT FAIL");
        }
    })

    // request merchant foodtype list
    $.ajax({
        url: `${serverHost}/merchant/foodtypelist`,
        type: 'GET',
        success: data => {
            data.forEach((item, index) => {
                console.log(item);
                let typeName = item.typeName;
                let tId = item.typeId;
                let content = `<option value="${tId}">${item.typeName}</option>`
                $("#classifyBtn").append(content);
            })

        },
        error: () => {
            console.log("fail");
        }
    });

    // request merchant list
    $.ajax({
        url: `${serverHost}/merchant/merchantlist`,
        type: 'GET',
        success: data => {
            if (!data || data.length == 0) {
                console.log('EMPTY CHERCHANT')
                return
            }
            data.forEach((item, index) => {
                console.log(item)
                let merchantId = item.merchantId;
                let merchantName = item.merchantName;
                let merchantAddress = item.merchantAddress;
                let merchantPic = item.merchantHeadpic;
                let content = `<div class="col-md-3 services-overview-grid">
									<div class="services-overview-grd">
										<a onclick="loadDetail('${merchantId}')" class="b-link-stripe b-animate-go1 swipebox" title="">
											<img style="min-width: 250px; min-height: 260px;" src="${merchantPic}" alt="" class="img-responsive">
										</a>
										<div class="services-overview-gd">
											<h4>${merchantName}</h4>
											<p>${merchantAddress}</p>
											<div class="detail">
												<a onclick="loadDetail('${merchantId}')">Detail</a>
											</div>
										</div>
									</div>
								</div>
							</div>`
                if (index % 4 == 1 && index != 1) {
                    content = '<div class="services-overview-grids">' + content + '</div><div class="clearfix"></div>'
                }

                $('#content').append(content)
            })
        },
        error: () => {
            console.log("ERROR!!!!")
        }
    });

    // Search
    $('#searchBtn').on('click', () => {
        let searchContent = $('#searchContent').val()
        console.log('search content: ' + searchContent)
        $.ajax({
            url: `${serverHost}/merchant/search?keyword=${searchContent}`,
            type: 'GET',
            success: data => {
                $('#content').html('');
                data.forEach((item, index) => {
                    let merchantId = item.merchantId;
                    let merchantName = item.merchantName;
                    let merchantAddress = item.merchantAddress;
                    let merchantHeadpic = item.merchantHeadpic;
                    let content = `<div class="col-md-3 services-overview-grid">
										<div class="services-overview-grd">
											<a href="detail.html?id=${merchantId}" class="b-link-stripe b-animate-go1 swipebox" title="">
												<img src="${merchantHeadpic}" alt=" " class="img-responsive">
											</a>
											<div class="services-overview-gd">
												<h4>${merchantName}</h4>
												<p>${merchantAddress}</p>
												<div class="detail">
													<a href="detail.html?id=${merchantId}">Detail</a>
												</div>
											</div>
										</div>
									</div>
								</div>`
                    if (index % 4 == 1 && index != 1) {
                        content = '<div class="services-overview-grids">' + content + '</div><div class="clearfix"></div>'
                    }
                    $('#content').append(content)
                })
            },

            error: () => {
                console.log('REQUEST ERROR')
            }
        })
    })

    let view = new ShopCartView('#shopcart');
    let model = new ShopCartModel([]);
    let component = new ShopCartComponent(model, view)
});

function classify(op) {
    let foodTypeId = $(op).val();
    const serverHost = window.config.serverHost
    $.ajax({
        url: `${serverHost}/merchant/update?foodTypeId=${foodTypeId}`,
        type: 'GET',
        success: data => {
            $("#content").html("");
            console.log('select: ' + data)
            data.forEach((item, index) => {
                let merchantId = item.merchantId;
                let merchantName = item.merchantName;
                let merchantAddress = item.merchantAddress;
                let merchantHeadpic = item.merchantHeadpic;
                let content = `<div class="col-md-3 services-overview-grid">
										<div class="services-overview-grd">
											<a href="detail.html?id=${merchantId}" class="b-link-stripe b-animate-go1 swipebox" title="">
												<img src="${merchantHeadpic}" alt=" " class="img-responsive">
											</a>
											<div class="services-overview-gd">
												<h4>${merchantName}</h4>
												<p>${merchantAddress}</p>
												<div class="detail">
													<a href="detail.html?id=${merchantId}">Detail</a>
												</div>
											</div>
										</div>
									</div>
								</div>`
                if (index % 4 == 1 && index != 1) {
                    content = '<div class="services-overview-grids">' + content + '</div><div class="clearfix"></div>'
                }
                $('#content').append(content)
            })
        }
    });
};

function loadDetail(merchantId) {
    window.sessionStorage.removeItem('shopcart');
    window.sessionStorage.removeItem('cartTotalPrice');
    window.sessionStorage.removeItem('foodListSize');

    location.href = `./detail.html?id=${merchantId}`
}